<template>
  <div class="vR-layout">
    <div class="vR-layout-all">
      <div class="vR-panel-content">
        <!-- 基础信息 -->
        <div class="vR-information">
          <div class="vr-title">
            <h2>基础信息</h2>
            <!-- 默认展开，当收起时，添加class名closeArea -->
            <i />
          </div>
          <div class="vr-content clearfix">
            <ul class="clearfix">
              <li>
                <label class="nessary">可视化名称</label>
                <div>
                  <input type="text" placeholder="请输入">
                </div>
              </li>
              <li>
                <label class="nessary">报表目录</label>
                <div>
                  <!-- 此处可引入select组件 -->
                  <input type="text" placeholder="请选择">
                  <i class="downDrag" />
                </div>
              </li>
              <li>
                <label>有效期</label>
                <div>
                  <!-- 此处引入可date时间组件 -->
                  <input type="text" placeholder="2019-11-29">
                  <i class="dataIcon" />
                </div>
              </li>
              <li>
                <label>可视化描述</label>
                <div>
                  <input type="text" placeholder="请输入">
                </div>
              </li>
            </ul>
          </div>
        </div>

        <!-- 图表配置 -->
        <div class="vR-table-chart">
          <div class="vr-title">
            <h2>图表配置</h2>
            <i></i>
          </div>
          <div class="vr-content  clearfix">
            <!-- 图形选择区域 -->
            <div class="selectChartArea clearfix">
                <div v-for="char in chars" :key="char.name" :class="char.type">
                  <div :class="char.charClass"></div>
                  <span>{{char.name}}</span>
                </div>
            </div>
            <!-- 图形选择区域展开收起icon -->
            <div class="chart-expand-open"></div>
            <!-- 图形配置区域 -->
            <div class="configChartArea">
              <!-- 左 - 指标库区域 -->
              <div class="indexDataBase">
                <!-- 指标库名称 -->
                <div class="indexTitle">
                  <span class="titleName" title="离散用户数">离散用户数</span>
                  -指标库
                </div>
                <!-- 搜索框 -->
                <div class="indexSearch">
                  <input type="text" placeholder="请输入关键字">
                  <i class="searchIcon"></i>
                </div>
                <!-- 指标信息 -->
                <div class="indexDetail">
                  <ul>
                    <li v-for="indicator in indicators" :key="indicator.name" title="拖拽至属性面板">
                      <i :class="indicator.icon" />
                      <span class="indexName">{{indicator.name}}</span>
                    </li>
                  </ul>
                </div>
                <!-- +添加衍生指标 -->
                <div class="add-DerivedIndicator">
                  <a href="">+ 添加衍生指标</a>
                </div>
              </div>
              <!-- 右 - 图形区域 -->
              <!-- 初始状态（未选中数据源的时候），添加class名chartAllScreen -->
              <div class="chartArea">
                <!-- 图形区域名称 -->
                <div class="chartTitle">图形区域</div>
                <!-- 图表模块 -->
                <div class="chartContainer">
                  <!-- 表格 -->
                  <!-- class名table-none：是当表格还未配置指标数据时的样式 -->
                  <div class="table-content">
                    <!-- 未配置 -->
                    <div class="empty">
                      <i class="bgNone table-none"></i>
                    </div>
                    <!-- 配置过的list表格 -->
                    <div class="tableList">

                    </div>
                    <!-- 鼠标滑过后展示的一些操作按钮 -->
                    <div class="operateBtn">
                      <a href="" class="config-attribute">属性配置</a>
                      <div class="deleteIcon">
                        <i class="drag"></i>
                        <i class="delete"></i>
                      </div>
                      <i class="scale"></i>
                    </div>
                  </div>
                  <!-- 饼图 -->
                  <div class="pie-content minWidth">
                    <!-- 未配置 -->
                    <div class="empty">
                      <i class="bgNone pie-none"></i>
                    </div>
                    <!-- 配置过的饼图 -->
                    <div class="pieShow">

                    </div>
                    <!-- 鼠标滑过后展示的一些操作按钮 -->
                    <div class="operateBtn">
                      <a href="" class="config-attribute">属性配置</a>
                      <div class="deleteIcon">
                        <i class="drag"></i>
                        <i class="delete"></i>
                      </div>
                      <i class="scale"></i>
                    </div>
                  </div>
                  <!-- 柱图 -->
                  <div class="bar-content minWidth">
                    <!-- 未配置 -->
                    <div class="empty">
                      <i class="bgNone bar-none"></i>
                    </div>
                    <!-- 配置过的柱图 -->
                    <div class="barShow">

                    </div>
                    <!-- 鼠标滑过后展示的一些操作按钮 -->
                    <div class="operateBtn">
                      <a href="" class="config-attribute">属性配置</a>
                      <div class="deleteIcon">
                        <i class="drag"></i>
                        <i class="delete"></i>
                      </div>
                      <i class="scale"></i>
                    </div>
                  </div>
                  <!-- 折线图 -->
                  <div class="line-content minWidth">
                    <!-- 未配置 -->
                    <div class="empty">
                      <i class="bgNone line-none"></i>
                    </div>
                    <!-- 配置过的折线图 -->
                    <div class="lineShow">

                    </div>
                    <!-- 鼠标滑过后展示的一些操作按钮 -->
                    <div class="operateBtn">
                      <a href="" class="config-attribute">属性配置</a>
                      <div class="deleteIcon">
                        <i class="drag"></i>
                        <i class="delete"></i>
                      </div>
                      <i class="scale"></i>
                    </div>
                  </div>
                  <!-- 散点图 -->
                  <div class="scatter-content minWidth">
                    <!-- 未配置 -->
                    <div class="empty">
                      <i class="bgNone scatter-none"></i>
                    </div>
                    <!-- 配置过的散点图 -->
                    <div class="scatterShow">

                    </div>
                    <!-- 鼠标滑过后展示的一些操作按钮 -->
                    <div class="operateBtn">
                      <a href="" class="config-attribute">属性配置</a>
                      <div class="deleteIcon">
                        <i class="drag"></i>
                        <i class="delete"></i>
                      </div>
                      <i class="scale"></i>
                    </div>
                  </div>
                  <!-- 地图 -->
                  <div class="map-content minWidth">
                    <!-- 未配置 -->
                    <div class="empty">
                      <i class="bgNone map-none"></i>
                    </div>
                    <!-- 配置过的地图 -->
                    <div class="mapShow">

                    </div>
                    <!-- 鼠标滑过后展示的一些操作按钮 -->
                    <div class="operateBtn">
                      <a href="" class="config-attribute">属性配置</a>
                      <div class="deleteIcon">
                        <i class="drag"></i>
                        <i class="delete"></i>
                      </div>
                      <i class="scale"></i>
                    </div>
                  </div>
                  <!-- 文本 -->
                  <div class="text-content minWidth">
                    <!-- 未配置 -->
                    <div class="empty">
                      <i class="bgNone text-none"></i>
                    </div>
                    <!-- 配置过的地图 -->
                    <div class="mapShow">

                    </div>
                    <!-- 鼠标滑过后展示的一些操作按钮 -->
                    <div class="operateBtn">
                      <a href="" class="config-attribute">属性配置</a>
                      <div class="deleteIcon">
                        <i class="drag"></i>
                        <i class="delete"></i>
                      </div>
                      <i class="scale"></i>
                    </div>
                  </div>
                  <!-- 混搭图 -->
                  <div class="mashup-content minWidth">
                    <!-- 未配置 -->
                    <div class="empty">
                      <i class="bgNone mashup-none"></i>
                    </div>
                    <!-- 配置过的混搭图 -->
                    <div class="mashupShow">

                    </div>
                    <!-- 鼠标滑过后展示的一些操作按钮 -->
                    <div class="operateBtn">
                      <a href="" class="config-attribute">属性配置</a>
                      <div class="deleteIcon">
                        <i class="drag"></i>
                        <i class="delete"></i>
                      </div>
                      <i class="scale"></i>
                    </div>
                  </div>
                  <!-- 瀑布图 -->
                  <div class="waterFall-content minWidth">
                    <!-- 未配置 -->
                    <div class="empty">
                      <i class="bgNone waterFall-none"></i>
                    </div>
                    <!-- 配置过的瀑布图 -->
                    <div class="waterFallShow">

                    </div>
                    <!-- 鼠标滑过后展示的一些操作按钮 -->
                    <div class="operateBtn">
                      <a href="" class="config-attribute">属性配置</a>
                      <div class="deleteIcon">
                        <i class="drag"></i>
                        <i class="delete"></i>
                      </div>
                      <i class="scale"></i>
                    </div>
                  </div>
                  <!-- 指标卡 -->
                  <div class="indexCard-content">
                    <!-- 未配置 -->
                    <div class="empty">
                      <i class="bgNone indexCard-none"></i>
                    </div>
                    <!-- 配置过的指标卡 -->
                    <div class="indexCardShow">

                    </div>
                    <!-- 鼠标滑过后展示的一些操作按钮 -->
                    <div class="operateBtn">
                      <a href="" class="config-attribute">属性配置</a>
                      <div class="deleteIcon">
                        <i class="drag"></i>
                        <i class="delete"></i>
                      </div>
                      <i class="scale"></i>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 属性面板 -->
              <div class="property-panel">
                <!-- 标题 -->
                <div class="panelTitle">
                  <span>属性</span>
                  <i class="close"></i>
                  <a href="" class="apply">应用</a>
                </div>
                <!-- tab -->
                <div class="panelTab clearfix">
                  <ul class="clearfix">
                    <!-- 选中状态，增加class名 active -->
                    <li class="active">图形数据</li>
                    <li>图形设置</li>
                  </ul>
                </div>
                <!-- 属性配置区域 -->
                <div class="pro-Container">
                  <!-- 图表table -->
                  <div class="pro-table-content" style="display: none;">
                    <div class="table-panel-title">行列配置</div>
                    <div class="table-panel-detail">
                      <ul>
                        <!-- 选中状态为active -->
                        <li class="active">
                          <!-- 展开为open-arrow -->
                          <i class="arrow open-arrow"></i>
                          <span>地市</span>
                          <div class="reBtn">
                            <i class="rename"></i>
                            <i class="remove"></i>
                          </div>
                          <!-- 展开 -->
                          <div class="index-expand">
                            <div class="colorBlock left-block"></div>
                            <div class="colorBlock right-block"></div>
                            <ul>
                              <li>
                                <div class="inputDrag">
                                  <input type="text" placeholder="求和">
                                  <i class="moreDrag"></i>
                                  <!-- 此处的下拉选择可引用select组件 -->
                                </div>

                              </li>
                              <li>
                                <label for="">同比</label>
                                <div class="pingpang pg-blue">

                                </div>
                              </li>
                              <li>
                                <label for="">环比</label>
                                <div class="pingpang pg-grey">

                                </div>
                              </li>
                            </ul>
                          </div>
                        </li>
                        <li>
                          <!-- 展开为open-arrow -->
                          <i class="arrow"></i>
                          <span>片区</span>
                          <div class="reBtn">
                            <i class="rename"></i>
                            <i class="remove"></i>
                          </div>
                        </li>
                        <li>
                          <!-- 展开为open-arrow -->
                          <i class="arrow"></i>
                          <span>操作时间</span>
                          <div class="reBtn">
                            <i class="rename"></i>
                            <i class="remove"></i>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <!-- 图形chart -->
                  <div class="pro-chart-content">
                    <!-- 维度配置 -->
                    <!-- 当前选中状态active -->
                    <div class="dimConfig active">
                      <div class="dimConfig-title">
                        <span>维度</span>
                        <i class="moreDrag"></i>
                      </div>
                      <div class="dimConfig-content">
                        <ul>
                          <!-- 选中状态为active -->
                          <li>
                            <!-- 展开为open-arrow -->
                            <i class="arrow open-arrow"></i>
                            <!-- radio选中为checked -->
                            <i class="radioBox checked"></i>
                            <span>地市</span>
                            <div class="reBtn">
                              <i class="rename"></i>
                              <i class="remove"></i>
                            </div>
                            <!-- 展开 -->
                            <div class="index-expand">
                              <div class="colorBlock left-block"></div>
                              <div class="colorBlock right-block"></div>
                              <ul>
                                <!-- <li>
                                          <div class="inputDrag">
                                              <input type="text" placeholder="求和">
                                              <i class="moreDrag"></i>
                                          </div>
                                      </li> -->
                                <li>
                                  <label for="">升序</label>
                                  <div class="pingpang pg-blue">

                                  </div>
                                </li>
                                <li>
                                  <label for="">降序</label>
                                  <div class="pingpang pg-grey">

                                  </div>
                                </li>
                              </ul>
                            </div>
                          </li>
                          <li>
                            <!-- 展开为open-arrow -->
                            <i class="arrow"></i>
                            <i class="radioBox"></i>
                            <span>片区</span>
                            <div class="reBtn">
                              <i class="rename"></i>
                              <i class="remove"></i>
                            </div>
                          </li>
                          <li>
                            <!-- 展开为open-arrow -->
                            <i class="arrow"></i>
                            <i class="radioBox"></i>
                            <span>操作时间</span>
                            <div class="reBtn">
                              <i class="rename"></i>
                              <i class="remove"></i>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                    <!-- 指标配置 -->
                    <div class="indConfig">
                      <div class="indConfig-title">
                        <span>指标</span>
                        <i class="moreDrag"></i>
                      </div>
                      <div class="indConfig-content" style="display: none;">
                        <ul>
                          <!-- 选中状态为active -->
                          <li>
                            <!-- 展开为open-arrow -->
                            <i class="arrow open-arrow"></i>
                            <!-- checkBox选中为checked -->
                            <i class="checkBox checked"></i>
                            <span>地市</span>
                            <div class="reBtn">
                              <i class="rename"></i>
                              <i class="remove"></i>
                            </div>
                            <!-- 展开 -->
                            <div class="index-expand">
                              <div class="colorBlock left-block"></div>
                              <div class="colorBlock right-block"></div>
                              <ul>
                                <li>
                                  <div class="inputDrag">
                                    <input type="text" placeholder="求和">
                                    <i class="moreDrag"></i>
                                    <!-- 此处的下拉选择可引用select组件 -->
                                  </div>
                                </li>
                                <li>
                                  <label for="">同比</label>
                                  <div class="pingpang pg-blue">
                                  </div>
                                </li>
                                <li>
                                  <label for="">环比</label>
                                  <div class="pingpang pg-grey">
                                  </div>
                                </li>
                              </ul>
                            </div>
                          </li>
                          <li>
                            <!-- 展开为open-arrow -->
                            <i class="arrow"></i>
                            <i class="checkBox"></i>
                            <span>片区</span>
                            <div class="reBtn">
                              <i class="rename"></i>
                              <i class="remove"></i>
                            </div>
                          </li>
                          <li>
                            <!-- 展开为open-arrow -->
                            <i class="arrow"></i>
                            <i class="checkBox"></i>
                            <span>操作时间</span>
                            <div class="reBtn">
                              <i class="rename"></i>
                              <i class="remove"></i>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 工具配置 -->
        <div class="vR-tool">
          <div class="vr-title">
            <h2>工具配置</h2>
            <i></i>
          </div>
          <div class="vr-content  clearfix">
            <div class="selectTools">
              <ul>
                <li>
                  <label for="">筛选条件</label>
                  <!-- pg-blue为打开乒乓按钮，pg-grey为关闭乒乓按钮 -->
                  <div class="pinpang pg-blue"></div>
                </li>
                <li>
                  <label for="">下载</label>
                  <div class="pinpang  pg-blue"></div>
                </li>
                <li>
                  <label for="">水印</label>
                  <div class="pinpang  pg-blue"></div>
                </li>
                <li>
                  <label for="">主题设置</label>
                  <div class="themeSet">
                    <!-- 以下radio部分可以使用radio组件 -->
                    <ul>
                      <li>
                        <div class="checked">
                          <input type="radio">
                        </div>
                        <label for="">白色清新</label>
                      </li>
                      <li>
                        <div>
                          <input type="radio">
                        </div>
                        <label for="">黑色炫酷</label>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
            <div class="conditionConfig">
              <div class="conditions clearfix">
                <div class="conditionList clearfix">
                  <ul>
                    <li>
                      <label for="">筛选名称：</label>
                      <div>
                        <input type="text" placeholder="请输入">
                      </div>
                    </li>
                    <li>
                      <span>对应</span>
                    </li>
                    <li>
                      <label for="">指标字段：</label>
                      <div>
                        <input type="text" placeholder="请选择">
                        <i class="sel-blutBtn">选择</i>
                      </div>
                    </li>
                    <li>
                      <span class="con-delete"></span>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="addConBtn">
                <a href="">+ 添加筛选条件</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 图标
      chars: [
        { type: 'table', charClass: 'graphBox chart-table', name: '表格' },
        { type: 'pieC', charClass: 'graphBox chart-pie', name: '饼图' },
        { type: 'barC', charClass: 'graphBox chart-bar', name: '柱图' },
        { type: 'lineC', charClass: 'graphBox chart-line', name: '折线图' },
        { type: 'scatterC', charClass: 'graphBox chart-scatter', name: '散点图' },
        { type: 'mapC', charClass: 'graphBox chart-map', name: '地图' },
        { type: 'textC', charClass: 'graphBox chart-text', name: '文本框' },
        { type: 'indexCardC', charClass: 'graphBox chart-indexCard', name: '指标卡' },
        { type: 'mashupC', charClass: 'graphBox chart-mashup', name: '混搭图' },
        { type: 'waterFallC', charClass: 'graphBox chart-waterFall', name: '瀑布图' }
      ],

      // 指标
      indicators: [
        { icon: 'indexName-icon sanIcon-green', name: '地市' },
        { icon: 'indexName-icon tIcon-green', name: '区县' },
        { icon: 'indexName-icon tIcon-green', name: '片区' },
        { icon: 'indexName-icon tIcon-green', name: '操作时间' },
        { icon: 'indexName-icon nIcon-green', name: '年龄' },
        { icon: 'indexName-icon sanIcon-green', name: '性别' },
        { icon: 'indexName-icon nIcon-green', name: '品牌' },
        { icon: 'indexName-icon nIcon-blue', name: '离散客户数' },
        { icon: 'indexName-icon nIcon-blue', name: '离网人数' },
        { icon: 'indexName-icon nIcon-blue', name: '离网证件' },
        { icon: 'indexName-icon nIcon-blue', name: '离网人数' },
        { icon: 'indexName-icon nIcon-blue', name: '异网人数' },
        { icon: 'indexName-icon nIcon-blue', name: '异网证件' },
        { icon: 'indexName-icon nIcon-blue', name: '变更证件' }
      ]
    }
  }
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

/*让body和html重新获得高*/
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

h4, h5, h6 {
  font-size: 1em;
}

em, i {
  font-style: normal;
}

ol, ul {
  list-style: none;
}

a {
  text-decoration: none;
  outline: none;
  color: #333;
}

img {
  display: block;
  /*让img的缝隙消失*/
}

img, iframe {
  border: 0;
}

input,
select,
textarea {
  font-size: 100%;
  resize: none;
  outline: none;
  /*去除input的蓝色边框，可根据情况是否去除*/
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
}

input::-ms-clear,
input::-ms-reveal {
  display: none;
}

th, td {
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*input::-webkit-input-placeholder{
  color:#999;
}
input::-moz-placeholder{              Mozilla Firefox 19+
    color:#999;
}
input:-moz-placeholder{               Mozilla Firefox 4 to 18
    color:#999;
}
input:-ms-input-placeholder{          Internet Explorer 10-11
    color:#999;
}*/
/*修改input中placeho的属性*/
.clearfix:after {
  content: " ";
  display: block;
  height: 0px;
  clear: both;
  visibility: hidden;
}

.clearfix {
  *zoom: 1;
}

/* 清除浮动 */
.fl {
  float: left;
}

.fr {
  float: right;
}

  /* variable */
  /* 边框线颜色 */
  /* 主色 */
  /* 辅色 */
  /* mixin */
  /* 新建可视化报表 */
  .vR-layout {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f4f7f9;
  }

  .vR-layout-all {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
    background: #f4f7f9;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .vR-panel-content {
    margin-top: -1px;
    border: 1px solid #d0d6d9;
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  .vR-information,
  .vR-table-chart,
  .vR-tool {
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  .vr-title {
    position: relative;
    height: 42px;
    line-height: 42px;
    border-bottom: 1px solid #e9ecf0;
  }

  .vr-title h2 {
    position: relative;
    line-height: 42px;
    padding: 0 15px;
    font-size: 14px;
    color: #333;
  }

  .vr-title h2::before {
    content: "";
    display: block;
    position: absolute;
    top: 15px;
    left: 0;
    width: 3px;
    height: 12px;
    background: #0085d0;
  }

  .vr-title i {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 55px;
    height: 42px;
    /* 收起 */
    background: url("") no-repeat right center;
  }

  .vr-title i.closeArea {
    background-image: url("");
  }

  .vr-content {
    margin-bottom: 20px;
  }

  .vr-content>ul {
    padding-top: 10px;
  }

  .vr-content>ul>li {
    float: left;
    width: 50%;
    font-size: 0;
  }

  .vr-content>ul>li>label {
    display: inline-block;
    width: 80px;
    line-height: 42px;
    margin-right: 12px;
    font-size: 13px;
    color: #333;
    text-align: right;
    vertical-align: top;
  }

  .vr-content>ul>li>label.nessary::before {
    content: "*";
    color: #ff595f;
  }

  .vr-content>ul>li>div {
    position: relative;
    display: inline-block;
    width: -webkit-calc(100% - 120px);
    width: -moz-calc(100% - 120px);
    width: -ms-calc(100% - 120px);
    width: calc(100% - 120px);
    height: 42px;
    line-height: 42px;
    font-size: 13px;
    color: #333;
    vertical-align: top;
  }

  .vr-content>ul>li>div>input {
    width: 100%;
    height: 30px;
    line-height: 28px;
    padding: 0 10px;
    border: 1px solid #d0d6d9;
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  .vr-content>ul>li>div>input:focus {
    border-color: #0085d0;
  }

  .vr-content>ul>li>div:hover>input {
    border-color: #0085d0;
  }

  .vr-content>ul>li>div:hover>.downDrag {
    background-image: url("/images/moreDrag-hover.png");
  }

  .vr-content>ul>li>div:hover>.dataIcon {
    background-image: url("/images/-s-icon_date_hov.png");
  }

  .vr-content .selectChartArea {
    /* height: 70px; */
    padding: 10px 0;
    border-bottom: 1px solid #e9ecf0;
  }

  .vr-content .selectChartArea>div {
    float: left;
    font-size: 0;
    margin: 0 20px;
  }

  .vr-content .selectChartArea>div .graphBox {
    width: 35px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
  }

  .vr-content .selectChartArea>div .chart-table {
    background-image: url("/images/table.png");
  }

  .vr-content .selectChartArea>div .chart-pie {
    background-image: url("/images/pie.png");
  }

  .vr-content .selectChartArea>div .chart-bar {
    background-image: url("/images/bar.png");
  }

  .vr-content .selectChartArea>div .chart-line {
    background-image: url("/images/line.png");
  }

  .vr-content .selectChartArea>div .chart-scatter {
    background-image: url("/images/scatter.png");
  }

  .vr-content .selectChartArea>div .chart-map {
    background-image: url("/images/map.png");
  }

  .vr-content .selectChartArea>div .chart-text {
    background-image: url("/images/text.png");
  }

  .vr-content .selectChartArea>div .chart-indexCard {
    background-image: url("/images/indexCard.png");
  }

  .vr-content .selectChartArea>div .chart-mashup {
    background-image: url("/images/mashup.png");
  }

  .vr-content .selectChartArea>div .chart-waterFall {
    background-image: url("/images/waterFallC.png");
  }

  .vr-content .selectChartArea>div>span {
    display: block;
    font-size: 12px;
    color: #666;
    margin-top: 10px;
    text-align: center;
  }

  .vr-content .chart-expand-open {
    display: block;
    width: 70px;
    height: 10px;
    background: url("") no-repeat center -30px;
    margin: 0 auto;
    margin-top: -1px;
  }

  .vr-content .configChartArea {
    position: relative;
    margin-top: -10px;
  }

  .vr-content .configChartArea .indexDataBase {
    position: relative;
    width: 200px;
    border: 1px solid #e9ecf0;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  .vr-content .configChartArea .indexDataBase .indexTitle {
    height: 36px;
    line-height: 36px;
    padding: 0 12px;
    font-size: 13px;
    color: #333;
    border-bottom: 1px solid #e9ecf0;
    background: #fff;
  }

  .vr-content .configChartArea .indexDataBase .indexTitle .titleName {
    display: inline-block;
    max-width: 125px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: left;
  }

  .vr-content .configChartArea .indexDataBase .indexSearch {
    position: relative;
    height: 42px;
    line-height: 42px;
    padding: 0 10px;
    font-size: 12px;
    color: #333;
    border-bottom: 1px solid #e9ecf0;
    background: #fff;
  }

  .vr-content .configChartArea .indexDataBase .indexSearch>input {
    width: 100%;
    height: 30px;
    line-height: 28px;
    border: 1px solid #d0d6d9;
    padding: 0 30px 0 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  .vr-content .configChartArea .indexDataBase .indexSearch>input:focus {
    border-color: #0085d0;
  }

  .vr-content .configChartArea .indexDataBase .indexSearch .searchIcon {
    position: absolute;
    top: 6px;
    right: 10px;
    display: block;
    width: 30px;
    height: 30px;
    background: url("/images/search-normal.png") no-repeat center;
    cursor: pointer;
  }

  .vr-content .configChartArea .indexDataBase .indexSearch:hover input {
    border-color: #0085d0;
  }

  .vr-content .configChartArea .indexDataBase .indexSearch:hover .searchIcon {
    background-image: url("/images/search-hover.png");
  }

  .vr-content .configChartArea .indexDataBase .indexDetail {
    /* position: absolute;*/
    /* top: 80px;*/
    /* left: 0;*/
    /* right: 0;*/
    /* bottom: 43px;*/
    max-height: 464px;
    /*padding: 10px 20px;*/
    overflow: auto;
  }

  .vr-content .configChartArea .indexDataBase .indexDetail ul li {
    position: relative;
    height: 36px;
    line-height: 36px;
    padding: 0 10px 0 12px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    cursor: move;
  }

  .vr-content .configChartArea .indexDataBase .indexDetail ul li .indexName-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/images/indexName-icon.png") no-repeat 0 0;
    vertical-align: middle;
  }

  .vr-content .configChartArea .indexDataBase .indexDetail ul li .tIcon-green {
    background-position: 0 0;
  }

  .vr-content .configChartArea .indexDataBase .indexDetail ul li .tIcon-blue {
    background-position: 0 -32px;
  }

  .vr-content .configChartArea .indexDataBase .indexDetail ul li .sanIcon-green {
    background-position: -31px 0;
  }

  .vr-content .configChartArea .indexDataBase .indexDetail ul li .sanIcon-blue {
    background-position: -31px -32px;
  }

  .vr-content .configChartArea .indexDataBase .indexDetail ul li .dIcon-green {
    background-position: -62px 0;
  }

  .vr-content .configChartArea .indexDataBase .indexDetail ul li .dIcon-blue {
    background-position: -62px -32px;
  }

  .vr-content .configChartArea .indexDataBase .indexDetail ul li .nIcon-green {
    background-position: -94px 0;
  }

  .vr-content .configChartArea .indexDataBase .indexDetail ul li .nIcon-blue {
    background-position: -94px -32px;
  }

  .vr-content .configChartArea .indexDataBase .indexDetail ul li .fangIcon-green {
    background-position: -123px 0;
  }

  .vr-content .configChartArea .indexDataBase .indexDetail ul li .fangIcon-blue {
    background-position: -123px -32px;
  }

  .vr-content .configChartArea .indexDataBase .indexDetail ul li .indexName {
    display: inline-block;
    font-size: 12px;
    color: #666;
  }

  .vr-content .configChartArea .indexDataBase .indexDetail ul li .pointOut {
    display: none;
    position: absolute;
    /*top: 3px;*/
    /*right: -10px;*/
    top: 6px;
    right: 0;
    padding: 0 10px;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    background: rgba(171, 184, 203, 0.7);
    filter: alpha(opacity=70);
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
  }

  .vr-content .configChartArea .indexDataBase .indexDetail ul li:hover {
    background-color: #e3f2fa;
  }

  .vr-content .configChartArea .indexDataBase .indexDetail ul li:hover .pointOut {
    display: block;
  }

  .vr-content .configChartArea .indexDataBase .add-DerivedIndicator {
    height: 42px;
    line-height: 42px;
    text-align: center;
    border-top: 1px solid #e9ecf0;
    background: #f4f7f9;
  }

  .vr-content .configChartArea .indexDataBase .add-DerivedIndicator>a {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 12px;
    color: #666;
    text-align: center;
  }

  .vr-content .configChartArea .indexDataBase .add-DerivedIndicator.active {
    border-top: 1px solid #0085d0;
    background: #0085d0;
  }

  .vr-content .configChartArea .indexDataBase .add-DerivedIndicator.active>a {
    color: #0085d0;
  }

  .vr-content .configChartArea .chartArea {
    position: absolute;
    top: 0;
    left: 199px;
    right: 0;
    bottom: 0;
    border: 1px solid #e9ecf0;
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  .vr-content .configChartArea .chartArea .chartTitle {
    height: 36px;
    line-height: 36px;
    padding: 0 12px;
    font-size: 13px;
    color: #333;
    border-bottom: 1px solid #e9ecf0;
    background: #fff;
  }

  .vr-content .configChartArea .chartArea .chartContainer {
    min-height: 250px;
    max-height: 550px;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    overflow: auto;
  }

  .vr-content .configChartArea .chartAllScreen {
    left: 0;
  }

  .vr-content .selectTools {
    height: 36px;
    line-height: 36px;
    margin-bottom: 20px;
    background: #fff;
    font-size: 12px;
    color: #666;
  }

  .vr-content .conditionConfig .addConBtn {
    margin-top: 15px;
  }

  .vr-content .conditionConfig .addConBtn>a {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 27px;
    font-size: 13px;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    background: #90bf30;
  }

  /* 图形 */
  .graphBox {
    width: 35px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
  }

  .chart-table {
    background-image: url("/images/table.png");
  }

  .chart-pie {
    background-image: url("/images/pie.png");
  }

  .chart-bar {
    background-image: url("/images/bar.png");
  }

  .chart-line {
    background-image: url("/images/line.png");
  }

  .chart-scatter {
    background-image: url("/images/scatter.png");
  }

  .chart-map {
    background-image: url("/images/map.png");
  }

  .chart-text {
    background-image: url("/images/text.png");
  }

  .chart-indexCard {
    background-image: url("/images/indexCard.png");
  }

  .chart-mashup {
    background-image: url("/images/mashup.png");
  }

  .chart-waterFall {
    background-image: url("/images/waterFallC.png");
  }

  /* 指标名称前图标 */
  .indexName-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/images/indexName-icon.png") no-repeat 0 0;
    vertical-align: middle;
  }

  .tIcon-green {
    background-position: 0 0;
  }

  .tIcon-blue {
    background-position: 0 -32px;
  }

  .sanIcon-green {
    background-position: -31px 0;
  }

  .sanIcon-blue {
    background-position: -31px -32px;
  }

  .dIcon-green {
    background-position: -62px 0;
  }

  .dIcon-blue {
    background-position: -62px -32px;
  }

  .nIcon-green {
    background-position: -94px 0;
  }

  .nIcon-blue {
    background-position: -94px -32px;
  }

  .fangIcon-green {
    background-position: -123px 0;
  }

  .fangIcon-blue {
    background-position: -123px -32px;
  }

  /* 图表 */
  .table-content {
    width: calc(100% - 12px);
    height: 240px;
    /* 最小高度min-height: 240px; */
    display: inline-block;
    float: left;
    max-width: calc(100% - 12px);
    margin: 0 12px 12px 0;
    overflow: hidden;
    border: 1px solid #e9ecf0;
    background: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  }

  .indexCard-content {
    width: 250px;
    /* 最小宽度min-width: 250px; */
    height: 250px;
    /* 最小高度min-height: 250px;*/
    display: inline-block;
    float: left;
    max-width: calc(100% - 12px);
    margin: 0 12px 12px 0;
    overflow: hidden;
    border: 1px solid #e9ecf0;
    background: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  }

  .minWidth {
    height: 250px;
    /* 最小高度min-height: 250px;*/
    display: inline-block;
    float: left;
    max-width: calc(100% - 12px);
    margin: 0 12px 12px 0;
    overflow: hidden;
    border: 1px solid #e9ecf0;
    background: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  }

  @media (min-width: 1280px) {
    .minWidth {
      min-width: -webkit-calc((100% - 24px)/2);
      min-width: -moz-calc((100% - 24px)/2);
      min-width: -ms-calc((100% - 24px)/2);
      min-width: calc((100% - 24px)/2);
    }
  }

  @media (min-width: 1600px) {
    .minWidth {
      min-width: -webkit-calc((100% - 36px)/3);
      min-width: -moz-calc((100% - 36px)/3);
      min-width: -ms-calc((100% - 36px)/3);
      min-width: calc((100% - 36px)/3);
    }
  }

  @media (min-width: 1920px) {
    .minWidth {
      min-width: -webkit-calc((100% - 48px)/4);
      min-width: -moz-calc((100% - 48px)/4);
      min-width: -ms-calc((100% - 48px)/4);
      min-width: calc((100% - 48px)/4);
    }
  }

  /* 未配置数据 */
  .empty {
    position: relative;
    width: 100%;
    height: 100%;
    display: table;
  }

  .empty .bgNone {
    position: absolute;
    display: inline-block;
    width: 120px;
    height: 120px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("/images/view_background.png") no-repeat 0 0;
  }

  .empty .table-none {
    background-position: -40px -40px;
  }

  .empty .pie-none {
    background-position: -40px -192px;
  }

  .empty .bar-none {
    background-position: -40px -350px;
  }

  .empty .line-none {
    background-position: -40px -490px;
  }

  .empty .scatter-none {
    background-position: -200px -630px;
  }

  .empty .map-none {
    background-position: -40px -1110px;
  }

  .empty .text-none {
    background-position: -360px -622px;
  }

  .empty .indexCard-none {
    background-position: -360px -762px;
  }

  .empty .mashup-none {
    background-position: -40px -626px;
  }

  .empty .waterFall-none {
    background-position: -870px -622px;
  }

  /* 鼠标滑过后展示的一些操作按钮 */
  .operateBtn {
    display: none;
  }

  .chartContainer {
    min-height: 250px;
    max-height: 550px;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    overflow: auto;
  }

  .chartContainer>div {
    position: relative;
    cursor: default;
    display: inline-block;
    float: left;
    max-width: calc(100% - 12px);
    margin: 0 12px 12px 0;
    overflow: hidden;
    border: 1px solid #e9ecf0;
    background: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  }

  .chartContainer>div:hover {
    border-color: #0085d0;
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 133, 208, 0.15);
    -moz-box-shadow: 0px 2px 4px 0px rgba(0, 133, 208, 0.15);
    -ms-box-shadow: 0px 2px 4px 0px rgba(0, 133, 208, 0.15);
    box-shadow: 0px 2px 4px 0px rgba(0, 133, 208, 0.15);
  }

  .chartContainer>div:hover .operateBtn {
    display: block;
  }

  .config-attribute {
    position: absolute;
    top: 15px;
    left: 15px;
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    background: #0085d0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
  }

  .deleteIcon {
    position: absolute;
    top: 15px;
    right: 15px;
  }

  .deleteIcon>i {
    display: block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
  }

  .deleteIcon>i.drag {
    margin-bottom: 15px;
    background-image: url("/images/drag.png");
  }

  .deleteIcon>i.drag:hover {
    background-image: url("/images/drag-hover.png");
  }

  .deleteIcon>i.delete {
    background-image: url("/images/delete.png");
  }

  .deleteIcon>i.delete:hover {
    background-image: url("/images/delete-hover.png");
  }

  .scale {
    position: absolute;
    right: -3px;
    bottom: -2px;
    display: block;
    width: 16px;
    height: 16px;
    background: url("/images/scale.png") no-repeat right bottom;
    cursor: se-resize;
  }

  /* 属性面板 */
  /* 标题 */
  .property-panel {
    position: absolute;
    top: 46px;
    left: 210px;
    bottom: 10px;
    width: 200px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #e9ecf0;
    background: #fff;
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  }

  .panelTitle {
    height: 36px;
    line-height: 36px;
    padding: 0 20px;
    border-bottom: 1px solid #e9ecf0;
    background: #fff;
  }

  .panelTitle span {
    display: inline-block;
    float: left;
    font-size: 12px;
    color: #333333;
  }

  .panelTitle .apply {
    display: inline-block;
    float: right;
    width: 40px;
    height: 20px;
    line-height: 18px;
    margin-top: 8px;
    margin-right: 12px;
    font-size: 12px;
    color: #0085d0;
    text-align: center;
    border: 1px solid #0085d0;
    background: rgba(0, 133, 208, 0.03);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
  }

  .panelTitle .apply:hover {
    color: #fff;
    background: #0085d0;
  }

  .panelTitle .close {
    display: inline-block;
    float: right;
    width: 16px;
    height: 16px;
    margin-top: 10px;
    cursor: pointer;
    background: url("/images/icon_close_nor.png") no-repeat right center;
  }

  .panelTitle .close:hover {
    background-image: url("/images/icon_close_hover.png");
  }

  /* tab */
  .panelTab ul li {
    float: left;
    width: 50%;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #e9ecf0;
    background: #fff;
    text-align: center;
    font-size: 12px;
    color: #666;
    opacity: .7;
    filter: alpha(opacity=70);
    cursor: pointer;
  }

  .panelTab ul li:hover {
    opacity: 1;
    filter: alpha(opacity=100);
  }

  .panelTab ul li.active {
    background: #f4f7f9;
    border-bottom-color: #f4f7f9;
    font-weight: bold;
    opacity: 1;
    filter: alpha(opacity=100);
  }

  /* 属性配置区域 */
  .pro-Container {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }

  /* 表格配置 */
  .pro-table-content {
    height: 100%;
  }

  .table-panel-title {
    height: 34px;
    line-height: 34px;
    border-bottom: 1px solid #e9ecf0;
    background: #fff;
    padding: 0 20px;
    font-size: 12px;
    color: #666;
  }

  .table-panel-title::before {
    content: "";
    display: inline-block;
    width: 2px;
    height: 10px;
    background: #0085d0;
    vertical-align: middle;
    margin-right: 8px;
  }

  .table-panel-detail {
    position: absolute;
    top: 35px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .table-panel-detail>ul>li {
    position: relative;
    padding: 0 15px 0 25px;
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    cursor: default;
  }

  .table-panel-detail>ul>li:hover {
    background: #e3f3fa;
  }

  .table-panel-detail>ul>li:hover .reBtn {
    display: block;
  }

  .table-panel-detail>ul>li:hover .index-expand {
    background: #f4f9fb;
  }

  .table-panel-detail>ul>li.active {
    background: #c9e8f6;
  }

  .table-panel-detail>ul>li.active .index-expand {
    background: #f4f9fb;
  }

  .table-panel-detail>ul>li .arrow {
    display: inline-block;
    width: 12px;
    height: 30px;
    margin: 0 6px 0 0;
    vertical-align: top;
    background: url("/images/left.png") no-repeat center;
  }

  .table-panel-detail>ul>li .arrow.open-arrow {
    background-image: url("/images/down.png");
  }

  .table-panel-detail>ul>li span {
    display: inline-block;
    font-size: 12px;
    color: #666;
    max-width: -webkit-calc(100% - 60px);
    max-width: -moz-calc(100% - 60px);
    max-width: -ms-calc(100% - 60px);
    max-width: calc(100% - 60px);
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
  }

  .table-panel-detail>ul>li .reBtn {
    float: right;
    display: none;
    height: 30px;
    vertical-align: top;
  }

  .table-panel-detail>ul>li .reBtn i {
    display: inline-block;
    width: 16px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
  }

  .table-panel-detail>ul>li .reBtn .rename {
    background-image: url("/images/rename-normal.png");
  }

  .table-panel-detail>ul>li .reBtn .rename:hover {
    background-image: url("/images/rename-hover.png");
  }

  .table-panel-detail>ul>li .reBtn .remove {
    background-image: url("/images/remove-normal.png");
  }

  .table-panel-detail>ul>li .reBtn .remove:hover {
    background-image: url("/images/remove-hover.png");
  }

  .table-panel-detail>ul>li .index-expand {
    background: #f4f9fb;
  }

  /* 属性面板中指标展开 */
  .index-expand {
    background: #f4f9fb;
  }

  .index-expand>ul>li {
    position: relative;
    height: 36px;
    line-height: 36px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    cursor: default;
    font-size: 12px;
    color: #666;
  }

  .index-expand>ul>li .inputDrag {
    position: relative;
    padding-top: 2px;
  }

  .index-expand>ul>li .inputDrag input {
    width: 120px;
    height: 22px;
    padding: 0 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #d0d6d9;
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  .index-expand>ul>li .inputDrag .moreDrag {
    display: block;
    position: absolute;
    top: 9px;
    right: 42px;
    width: 20px;
    height: 22px;
    background: url("/images/moreDrag-normal.png") no-repeat center;
  }

  .index-expand>ul>li>label {
    display: inline-block;
    height: 36px;
    line-height: 36px;
    font-size: 12px;
    vertical-align: top;
    margin: 0 30px 0 10px;
  }

  .index-expand>ul>li>.pingpang {
    display: inline-block;
    width: 40px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
  }

  .index-expand>ul>li>.pg-blue {
    background-image: url("/images/kai.png");
  }

  .index-expand>ul>li>.pg-grey {
    background-image: url("/images/guan.png");
  }

  .colorBlock {
    position: absolute;
    top: 30px;
    height: 108px;
    background: #f4f9fb;
  }

  .left-block {
    left: 0;
    width: 25px;
  }

  .right-block {
    right: 0;
    width: 15px;
  }

  /* 图形配置 */
  .pro-chart-content {
    height: 100%;
  }

  .dimConfig-title,
  .indConfig-title {
    position: relative;
    height: 34px;
    line-height: 34px;
    border-bottom: 1px solid #e9ecf0;
    border-top: 1px solid #e9ecf0;
    background: #fff;
    margin-top: -1px;
    padding: 0 20px;
    font-size: 12px;
    color: #666;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  .dimConfig-title>span,
  .indConfig-title>span {
    display: inline-block;
    line-height: 34px;
    font-size: 12px;
    color: #666;
  }

  .dimConfig-title>span::before,
  .indConfig-title>span::before {
    content: "";
    display: inline-block;
    width: 2px;
    height: 10px;
    background: #0085d0;
    vertical-align: middle;
    margin-right: 8px;
  }

  .dimConfig-title .moreDrag,
  .indConfig-title .moreDrag {
    display: block;
    position: absolute;
    top: 0;
    right: 15px;
    width: 20px;
    height: 34px;
    background: url("/images/moreDrag-normal.png") no-repeat center;
  }

  .dimConfig.active .dimConfig-title>span,
  .indConfig.active .indConfig-title>span {
    color: #0085d0;
  }

  .dimConfig.active,
  .indConfig.active {
    height: -webkit-calc(100% - 32px);
    height: -moz-calc(100% - 32px);
    height: -ms-calc(100% - 32px);
    height: calc(100% - 32px);
  }

  .dimConfig.active .dimConfig-content,
  .dimConfig.active .indConfig-content,
  .indConfig.active .dimConfig-content,
  .indConfig.active .indConfig-content {
    background: #fff;
  }

  /* 维度配置 */
  .dimConfig-content {
    position: absolute;
    top: 34px;
    left: 0;
    right: 0;
    bottom: 35px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .dimConfig-content>ul>li {
    position: relative;
    padding: 0 15px 0 25px;
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    cursor: default;
  }

  .dimConfig-content>ul>li:hover {
    background: #e3f3fa;
  }

  .dimConfig-content>ul>li:hover .reBtn {
    display: block;
  }

  .dimConfig-content>ul>li:hover .index-expand {
    background: #f4f9fb;
  }

  .dimConfig-content>ul>li.active {
    background: #c9e8f6;
  }

  .dimConfig-content>ul>li.active .index-expand {
    background: #f4f9fb;
  }

  .dimConfig-content>ul>li .arrow {
    display: inline-block;
    width: 12px;
    height: 30px;
    margin: 0 2px 0 0;
    vertical-align: top;
    background: url("/images/left.png") no-repeat center;
  }

  .dimConfig-content>ul>li .arrow.open-arrow {
    background-image: url("/images/down.png");
  }

  .dimConfig-content>ul>li .radioBox {
    display: inline-block;
    width: 16px;
    height: 30px;
    margin: 0 2px 0 0;
    vertical-align: top;
    background: url("/images/radio-nor.png") no-repeat center;
  }

  .dimConfig-content>ul>li .radioBox.checked {
    background-image: url("/images/radio-checked.png");
  }

  .dimConfig-content>ul>li span {
    display: inline-block;
    font-size: 12px;
    color: #666;
    max-width: -webkit-calc(100% - 60px);
    max-width: -moz-calc(100% - 60px);
    max-width: -ms-calc(100% - 60px);
    max-width: calc(100% - 60px);
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
  }

  .dimConfig-content>ul>li .reBtn {
    float: right;
    display: none;
    height: 30px;
    vertical-align: top;
  }

  .dimConfig-content>ul>li .reBtn i {
    display: inline-block;
    width: 16px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
  }

  .dimConfig-content>ul>li .reBtn .rename {
    background-image: url("/images/rename-normal.png");
  }

  .dimConfig-content>ul>li .reBtn .rename:hover {
    background-image: url("/images/rename-hover.png");
  }

  .dimConfig-content>ul>li .reBtn .remove {
    background-image: url("/images/remove-normal.png");
  }

  .dimConfig-content>ul>li .reBtn .remove:hover {
    background-image: url("/images/remove-hover.png");
  }

  .dimConfig-content>ul>li .index-expand {
    position: relative;
    background: #f4f9fb;
  }

  .dimConfig-content>ul>li .index-expand .colorBlock {
    position: absolute;
    top: 0;
    height: 72px;
    background: #f4f9fb;
  }

  .dimConfig-content>ul>li .index-expand .left-block {
    left: -25px;
    width: 25px;
  }

  .dimConfig-content>ul>li .index-expand .right-block {
    right: -15px;
    width: 15px;
  }

  /* 指标配置 */
  .indConfig-content {
    position: absolute;
    top: 66px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .indConfig-content>ul>li {
    position: relative;
    padding: 0 15px 0 25px;
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    cursor: default;
  }

  .indConfig-content>ul>li:hover {
    background: #e3f3fa;
  }

  .indConfig-content>ul>li:hover .reBtn {
    display: block;
  }

  .indConfig-content>ul>li:hover .index-expand {
    background: #f4f9fb;
  }

  .indConfig-content>ul>li.active {
    background: #c9e8f6;
  }

  .indConfig-content>ul>li.active .index-expand {
    background: #f4f9fb;
  }

  .indConfig-content>ul>li .arrow {
    display: inline-block;
    width: 12px;
    height: 30px;
    margin: 0 2px 0 0;
    vertical-align: top;
    background: url("/images/left.png") no-repeat center;
  }

  .indConfig-content>ul>li .arrow.open-arrow {
    background-image: url("/images/down.png");
  }

  .indConfig-content>ul>li .checkBox {
    display: inline-block;
    width: 16px;
    height: 30px;
    margin: 0 2px 0 0;
    vertical-align: top;
    background: url("/images/checkbox.jpg") no-repeat -2px 5px;
  }

  .indConfig-content>ul>li .checkBox.checked {
    background-position: -42px 5px;
  }

  .indConfig-content>ul>li span {
    display: inline-block;
    font-size: 12px;
    color: #666;
    max-width: -webkit-calc(100% - 60px);
    max-width: -moz-calc(100% - 60px);
    max-width: -ms-calc(100% - 60px);
    max-width: calc(100% - 60px);
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
  }

  .indConfig-content>ul>li .reBtn {
    float: right;
    display: none;
    height: 30px;
    vertical-align: top;
  }

  .indConfig-content>ul>li .reBtn i {
    display: inline-block;
    width: 16px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
  }

  .indConfig-content>ul>li .reBtn .rename {
    background-image: url("/images/rename-normal.png");
  }

  .indConfig-content>ul>li .reBtn .rename:hover {
    background-image: url("/images/rename-hover.png");
  }

  .indConfig-content>ul>li .reBtn .remove {
    background-image: url("/images/remove-normal.png");
  }

  .indConfig-content>ul>li .reBtn .remove:hover {
    background-image: url("/images/remove-hover.png");
  }

  .indConfig-content>ul>li .index-expand {
    position: relative;
    background: #f4f9fb;
  }

  .indConfig-content>ul>li .index-expand .colorBlock {
    position: absolute;
    top: 0;
    height: 108px;
    background: #f4f9fb;
  }

  .indConfig-content>ul>li .index-expand .left-block {
    left: -25px;
    width: 25px;
  }

  .indConfig-content>ul>li .index-expand .right-block {
    right: -15px;
    width: 15px;
  }

  /*工具配置*/
  .selectTools>ul {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  .selectTools>ul>li {
    float: left;
    margin: 0 20px;
    font-size: 0;
  }

  .selectTools>ul>li>label {
    display: inline-block;
    line-height: 36px;
    font-size: 12px;
    color: #666;
    opacity: .8;
    filter: alpha(opacity=80);
    margin-right: 12px;
    vertical-align: top;
  }

  .selectTools>ul>li>div {
    display: inline-block;
    line-height: 36px;
    font-size: 12px;
    color: #666;
    vertical-align: top;
  }

  .selectTools>ul>li .pinpang {
    display: inline-block;
    width: 40px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
  }

  .selectTools>ul>li>.pg-blue {
    background-image: url("/images/kai.png");
  }

  .selectTools>ul>li>.pg-grey {
    background-image: url("/images/guan.png");
  }

  .themeSet>ul>li {
    float: left;
    margin-right: 15px;
    font-size: 0;
  }

  .themeSet>ul>li>label {
    display: inline-block;
    line-height: 36px;
    font-size: 12px;
    color: #666;
    opacity: .8;
    filter: alpha(opacity=80);
    margin-left: 6px;
    vertical-align: top;
  }

  .themeSet>ul>li>div {
    display: inline-block;
    line-height: 36px;
    font-size: 12px;
    color: #666;
    vertical-align: top;
    width: 16px;
    height: 36px;
    background: url("/images/radio-nor.png") no-repeat center;
  }

  .themeSet>ul>li>div.checked {
    background-image: url("/images/radio-checked.png");
  }

  .themeSet>ul>li>div input {
    opacity: 0;
  }

  /* 添加的筛选条件 */
  .conditionList {
    padding: 0 20px;
  }

  .conditionList>ul>li {
    float: left;
    margin-right: 15px;
    font-size: 0;
  }

  .conditionList>ul>li>label {
    display: inline-block;
    line-height: 42px;
    font-size: 12px;
    color: #666;
    margin-right: 2px;
    vertical-align: top;
  }

  .conditionList>ul>li>div {
    position: relative;
    display: inline-block;
    width: 200px;
    line-height: 42px;
    font-size: 12px;
    color: #666;
    vertical-align: top;
  }

  .conditionList>ul>li>div input {
    width: 100%;
    height: 30px;
    line-height: 28px;
    padding: 0 55px 0 10px;
    border: 1px solid #d0d6d9;
    background: #fff;
    outline: none;
    resize: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  .conditionList>ul>li .sel-blutBtn {
    position: absolute;
    top: 6px;
    right: 0;
    line-height: 30px;
    padding: 0 10px;
    font-size: 12px;
    color: #0085d0;
    cursor: pointer;
  }

  .conditionList>ul>li .sel-blutBtn::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    margin-right: 10px;
    vertical-align: top;
    margin-top: 9px;
    background: #d0d6d9;
  }

  .conditionList>ul>li span {
    display: inline-block;
    line-height: 42px;
    font-size: 12px;
    color: #666;
    vertical-align: top;
  }

  .con-delete {
    display: block;
    width: 30px;
    height: 30px;
    margin-top: 6px;
    margin-left: 15px;
    background: url("/images/icon_delete_nor.png") no-repeat center;
  }

  .downDrag,
  .dataIcon {
    position: absolute;
    top: 6px;
    right: 0;
    width: 30px;
    height: 30px;
    background: url("/images/moreDrag-normal.png") no-repeat center;
  }

  .dataIcon {
    background-image: url("/images/-s-icon_date_nor.png");
  }
</style>
